<template>
	<!-- 首页 -->
	<view class="z-padding-bottom">
		<view class="">
			<image src="https://mp-3ad318f6-bda9-4e5c-9962-7e028b4b8932.cdn.bspapp.com/images/code-cover.png"
				class="z-width-full" mode="widthFix"></image>
			<view class="z-card index-card">
				<image class="user-avatar z-shadow" :src="resumeInfo.avatar" mode=""></image>
				<view class="">
					<text class="z-text-bold z-relative" style="left: 140rpx;top: -6rpx;">{{resumeInfo.name}}</text>
					<text class="z-float-right user-position z-text-sm">{{resumeInfo.position}}</text>
				</view>
				<view class="z-flex z-text-content z-margin-top" style="flex-wrap: wrap;padding: 0 10rpx;">
					<view class="" style="width: 50%;">
						<text class="tn-icon-code"></text>
						<text class="z-margin-left-xs">经验：{{resumeInfo.experience}}</text>
					</view>
					<view class="" style="width: 50%;">
						<text class="tn-icon-my-add"></text>
						<text class="z-margin-left-xs">年龄：{{resumeInfo.age}}岁</text>
					</view>
					<view class="" style="width: 50%;">
						<text class="tn-icon-write-feather"></text>
						<text class="z-margin-left-xs">专业：{{resumeInfo.major}}</text>
					</view>
					<view class="" style="width: 50%;">
						<text class="tn-icon-location"></text>
						<text class="z-margin-left-xs">坐标：{{resumeInfo.location}}</text>
					</view>
				</view>
				<view class="z-margin-xs z-no-margin-bottom">
					<view :class="'user-tag z-text-sm bg-color-' + (index + 1)" v-for="(item,index) in resumeInfo.tags"
						:key="index">
						{{item}}
					</view>
				</view>
			</view>
			<view class="z-card z-margin">
				<view class="sub-title">
					<text class="z-text-bold z-text-xl"
						style="text-shadow: 6rpx 6rpx 8rpx rgba(0, 102, 204, 0.2);">工作经历</text>
					<text class="z-text-upper">experience</text>
				</view>
				<view class="z-margin-xs">
					<view class="z-text-content company-item" v-for="(item,index) in companytList" :key="index">
						<view class="z-flex-center-between">
							<text class="z-text-bold">{{item.name}}</text>
							<view class="z-text-sm text-color3 z-margin-bottom-xs">
								{{item.time}}
							</view>
						</view>
						<view class="text-color2">
							<text>{{item.position}}</text>
							<text class="z-margin-left">{{item.industry}}</text>
						</view>
						<view class="z-margin-top-xs text-color1">
							工作内容：
						</view>
						<view class="text-color2">
							<text decode>{{item.content}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="z-card z-margin">
				<view class="sub-title">
					<text class="z-text-bold z-text-xl"
						style="text-shadow: 6rpx 6rpx 8rpx rgba(0, 102, 204, 0.2);">职业技能</text>
					<text class="z-text-upper">skills</text>
				</view>
				<view class="text-color2 z-margin-xs">
					<tn-time-line>
						<block v-for="(item, index) in resumeInfo.skills" :key="item.id">
							<tn-time-line-item>
								<template slot="node">
									<view class="tn-text-center"
										style="width: 30rpx;height: 30rpx;line-height:30rpx;background: #aaaaaa;border-radius: 50%;">
										<text class="tn-icon-code tn-color-white tn-text-sm"></text>
									</view>
								</template>
								<template slot="content">
									<view>
										{{item.title}}
									</view>
								</template>
							</tn-time-line-item>
						</block>
					</tn-time-line>
				</view>
			</view>
			<view class="z-card z-margin">
				<view class="sub-title">
					<text class="z-text-bold z-text-xl"
						style="text-shadow: 6rpx 6rpx 8rpx rgba(0, 102, 204, 0.2);">自我评价</text>
					<text class="z-text-upper">appraise</text>
				</view>
				<view class="text-color2 z-margin-xs">
					<view class="z-text-content z-flex z-margin-bottom-xs" v-for="(item,index) in resumeInfo.appraise"
						:key="index">
						<text class="z-text-bold z-margin-right-xs"
							style="vertical-align: 3rpx;">·</text><text>{{item}}</text>
					</view>
				</view>
			</view>
			<view class="z-card z-margin">
				<view class="sub-title">
					<text class="z-text-bold z-text-xl"
						style="text-shadow: 6rpx 6rpx 8rpx rgba(0, 102, 204, 0.2);">技术栈</text>
					<text class="z-text-upper">ability</text>
				</view>
				<view class="" style="height: 500rpx;">
					<qiun-data-charts canvas2d type="word" :opts="wordOpts" :chartData="wordChartData" />
				</view>
			</view>
			<zou-tabbar ref="tabbarRef" v-model="tabIndex"></zou-tabbar>
		</view>
	</view>
</template>

<script>
	import zouTabbar from "@/components/zou-tabbar";
	import resumeInfo from "@/mockdata/resume.js";
	import company from "@/mockdata/company.js";
	export default {
		components: {
			zouTabbar
		},
		data() {
			return {
				tabIndex: 0,
				resumeInfo: resumeInfo,
				companytList: company.list,
				wordOpts: {
					color: ["#4B98FE", "#00D05E", "#FFAC00", "#FB6A67", "#957BFE", "#00B9FE", "#FE871B", "#00C8B0",
						"#F674D6"
					],
					padding: undefined,
					enableScroll: false,
					extra: {
						word: {
							type: "normal",
							autoColors: false
						}
					}
				},
				wordChartData: {
					"series": [{
						"name": "HTML",
						"textSize": 25
					}, {
						"name": "CSS",
						"textSize": 25
					}, {
						"name": "JavaScript",
						"textSize": 24
					}, {
						"name": "Vue.js",
						"textSize": 25
					}, {
						"name": "React.js",
						"textSize": 16
					}, {
						"name": "小程序",
						"textSize": 25
					}, {
						"name": "uniCloud",
						"textSize": 25
					}, {
						"name": "Vite",
						"textSize": 18
					}, {
						"name": "webpack",
						"textSize": 16
					}, {
						"name": "数据库",
						"textSize": 16
					}, {
						"name": "uniapp",
						"textSize": 25
					}, {
						"name": "java",
						"textSize": 16
					}]
				},
			}
		},
		onLoad() {
			uni.hideTabBar();
			this.resumeInfo.tags = this.resumeInfo.tags.split(",");
			let skills = this.resumeInfo.skill.split("\n");
			this.resumeInfo.skills = skills.map((item, index) => {
				return {
					id: index,
					title: item
				}
			})
			this.resumeInfo.appraise = this.resumeInfo.appraise.split("\n");
			const currentYear = new Date().getFullYear();
			this.resumeInfo.age = currentYear - this.resumeInfo.birthday.substring(0, 4);
		},
	}
</script>

<style lang="scss" scoped>
	.index-card {
		position: relative;
		margin: -100rpx 30rpx 30rpx;
	}

	.user-avatar {
		position: absolute;
		left: 40rpx;
		top: -40rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 2px solid #ffffff;
	}

	.user-position {
		color: $z-white-color;
		background: rgba($color: $z-main-color, $alpha: 0.6);
		border-radius: 4rpx;
		padding: 4rpx 10rpx;
	}

	.user-tag {
		display: inline-block;
		margin-right: 10rpx;
		color: $z-white-color;
		border-radius: 4rpx;
		padding: 4rpx 10rpx;
	}

	.company-item {
		border-bottom: 1px solid #E5E6EB;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;

		&:last-child {
			border: none;
			margin: 0;
		}
	}

	.sub-title {
		display: flex;
		flex-direction: column;
		color: $z-main-color;
		opacity: 0.8;

		.z-text-upper {
			position: relative;
			top: -0.8em;
			left: 0.8em;
			opacity: 0.4;
		}
	}

	.bg-color-1 {
		background-color: #1cbbb4;
	}

	.bg-color-2 {
		background-color: #8dc63f;
	}

	.bg-color-3 {
		background-color: #e03997;
	}

	.bg-color-4 {
		background-color: #f37b1d;
	}

	.bg-color-5 {
		background-color: #e54d42;
	}

	.bg-color-6 {
		background-color: #fbbd08;
	}

	.bg-color-7 {
		background-color: #6739b6;
	}

	.bg-color-8 {
		background-color: #a5673f;
	}
</style>